import React from 'react';
import styles from './TableList.css';
import { Card, Input, Table } from 'antd';
const { Search } = Input;

function TableList({queryStr,clmConfigs,datas,pageSize,currentPage,totalCount,loading,fnQuery}) {
  const pagination = {
    current: currentPage,
    pageSize: pageSize,
    onChange: loadList,
    total: totalCount,
    showTotal: (t) => `总计：${t}`,
  };
  function loadList(page, pageSize, queryStr) {
    fnQuery(page, pageSize, queryStr);
  }
  return (
    <div className={styles.normal}>
      <Card>
        <Search
          placeholder="请输入查询条件"
          size="large"
          value={queryStr}
          style={{ width: 300 }}
          onSearch={value => loadList(1, pageSize, value)} />
      </Card>
      <Table 
        pagination={pagination}
        columns={clmConfigs}
        loading={loading}
        dataSource={datas}
        rowKey="id"
        bordered />
    </div>
  );
}

export default TableList;
